<script setup lang="ts">
import { companyMemberPage, deleteMember, changeAdmin } from "~/api/user";
import { useUserStore } from "~/store/useUser";
import { useImageCache } from "~/composables/useImageCache";

useSeoMeta({
  title: "管理成员 - 技能猴子",
  ogTitle: "管理成员 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

const user = useUserStore();
const { getCoverImage } = useImageCache();
const addMemberShow = ref(false);
const confirmTransferShow = ref(false);
const confirmRemovalShow = ref(false);

onMounted(() => {
  getMemberPage();
});

const memberPageParams = ref({
  pageNum: 1,
  pageSize: 200,
});
const memberPage = ref([]);
const memberCount = ref(0);
const getMemberPage = async () => {
  try {
    const { data } = await companyMemberPage(memberPageParams.value);
    memberPage.value = data.records;
    memberCount.value = data.total;
  } catch (e) {
    console.log(e);
  }
};
const reloadMember = () => {
  getMemberPage();
  addMemberShow.value = false;
};

// 移除成员
const deleteMemberHandle = async () => {
  if (!activeMember.value) return;
  try {
    await deleteMember(activeMember.value.id);
    await getMemberPage();
    activeMember.value = null;
    confirmRemovalShow.value = false;
  } catch (e) {
    console.log(e);
  }
};

// 删除成员
const activeMember = ref(null);
const deleteDialog = (member) => {
  confirmRemovalShow.value = true;
  activeMember.value = member;
};

// 转让管理员
const changeAdminActive = ref(null);
const changeAdminDialog = (member) => {
  changeAdminActive.value = member;
  confirmTransferShow.value = true;
};
const changeAdminHandle = async () => {
  if (!changeAdminActive.value) return;
  try {
    await changeAdmin({
      id: changeAdminActive.value.id,
    });
    await getMemberPage();
    changeAdminActive.value = null;
    confirmTransferShow.value = false;
  } catch (e) {
    console.log(e);
  }
};
// 是否显示转让和移除
const isShow = computed(() => {
  const duties = memberPage.value.find((item) => item.duties === 1);
  console.log(user.getUserInfo.userId, duties.sysUserId);
  if (duties) {
    const userId = user.getUserInfo.userId;
    return userId === duties.sysUserId;
  }
  return false;
});
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="manage-members">
    <h4 class="page-title">管理成员</h4>
    <div class="list">
      <p class="header">
        <span class="size">团队成员（{{ memberCount || 0 }}）</span>
        <span class="add" @click="addMemberShow = true">+ 添加成员</span>
      </p>
      <div class="table">
        <div class="table-header">
          <span>成员</span>
          <span>职位</span>
          <span>手机号</span>
          <span>操作</span>
        </div>
        <div
          class="table-body"
          v-for="(item, index) in memberPage"
          :key="item.id"
        >
          <span class="user">
            <img v-if="item.profilePic" :src="getCoverImage(item.profilePic)" alt="" />
            <img v-else src="~/assets/app-mj.png" alt="" />
            {{ item.nickName }}
          </span>
          <span>{{ item.duties === 1 ? "管理员" : "员工" }}</span>
          <span>{{ item.mobile }}</span>
          <span class="btns">
            <span
              class="change"
              v-if="item.duties !== 1 && isShow"
              @click="changeAdminDialog(item)"
              >转让管理员</span
            >
            <span
              class="del"
              v-if="item.duties !== 1 && isShow"
              @click="deleteDialog(item)"
              >移除</span
            >
          </span>
        </div>
      </div>
    </div>
  </div>
  <BaseFooter />
  <DialogAddMember v-if="addMemberShow" @close="reloadMember" />
  <DialogConfirmTransfer
    v-if="confirmTransferShow"
    :changeAdminActive="changeAdminActive"
    @close="confirmTransferShow = false"
    @confirm="changeAdminHandle"
  />
  <DialogConfirmRemoval
    v-if="confirmRemovalShow"
    @close="confirmRemovalShow = false"
    @confirm="deleteMemberHandle"
  />
</template>

<style scoped lang="scss">
.manage-members {
  padding-top: 80px;
  width: 1100px;
  margin: 0 auto;
  padding-bottom: 36px;
  min-height: calc(100vh - 286px);
}
.page-title {
  color: #191e28;
  font-size: 20px;
  padding-top: 32px;
  padding-bottom: 16px;
}
.list {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px 24px;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    .size {
      flex: 1;
      color: #191e28;
      font-size: 16px;
      font-weight: bold;
    }
    .add {
      color: #019a81;
      cursor: pointer;
    }
  }
  .table {
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    .table-header {
      background: #f9fafb;
      padding: 17px 24px;
      display: flex;
      span {
        flex: 1;
        &:nth-child(4) {
          flex: 0.5;
        }
      }
    }
    .table-body {
      padding: 17px 24px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e7eb;
      &:last-child {
        border-bottom: none;
      }
      .user {
        display: flex;
        align-items: center;
        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
      span {
        flex: 1;
        &:nth-child(4) {
          flex: 0.5;
        }
      }
      .change {
        color: #1dbf73;
        cursor: pointer;
      }
      .del {
        color: #ff4f4f;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
